<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="table-container table-fullscreen" v-loading="pageLoading">
        <el-form ref="formRef" :model="formData" label-position="top">
          <div class="specTit mb16">投资方信息</div>
          <div class="sBar">
            <template v-for="item in formDesignList">
              <template v-if="!item.isYQ || (formData.companiesCode === '01' && item.isYQ == 'y') || (formData.companiesCode !== '01' && item.isYQ != 'y')">
                <el-form-item :class="{col2: !!item.isCol2}" :label="item.label" :prop="item.prop" :rules="!!isSetRule ? item.rules : []">
                  <FormTemplate :form-item="{...item, readonly: !!isDetail}" v-model="formData[item.prop]"/>
                </el-form-item>
              </template>
            </template>
            <div style="clear: both;"></div>
          </div>
          <div class="specTit mb16">拟投资项目概况</div>
          <div class="sBar">
            <template v-for="item in yFormDesignList">
              <template v-if="!item.isYQ || (formData.companiesCode === '01' && item.isYQ == 'y') || (formData.companiesCode !== '01' && item.isYQ != 'y')">
                <el-form-item :class="{col2: !!item.isCol2}" :label="item.label" :prop="item.prop" :rules="!!isSetRule ? item.rules : []">
                  <FormTemplate :form-item="{...item, readonly: !!isDetail}" v-model="formData[item.prop]"/>
                </el-form-item>
              </template>
            </template>
            <div style="clear: both;"></div>
          </div>
          <div class="specTit mb16">进展状态</div>
          <div class="sBar">
            <template v-for="item in lFormDesignList">
              <el-form-item :class="{col2: !!item.isCol2}" :label="item.label" :prop="item.prop" :rules="!!isSetRule ? item.rules : []">
                <FormTemplate :form-item="{...item, readonly: !!isDetail}" v-model="formData[item.prop]"/>
              </el-form-item>
            </template>
            <div style="clear: both;"></div>
          </div>
        </el-form>
        <el-button style="width: 120px;margin: auto;" type="primary" @click="onSubmit">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import FormTemplate from "@/views/investment/components/FormTemplate";
import intservApi from "@/api/investment/intserv";
import dataCaptureApi from "@/api/investment/dataCapture";

export default {
  name: "InvestmentManagementForm",
  components: { FormTemplate },
  props: {
    source: {
      type: Number,
      default: 1
    }
  },
  dicts: ['QYLX', 'zs_tdxz', 'zs_hzfs', 'zs_gsjb'],
  data() {
    return {
      parentId: null,
      isDetail: null,
      idKeyName: 'manageId',
      pageLoading: false,
      formData: {
        companiesCode: ''
      },
      userZBInfo: {},
      formDesignList: [
        { type: 'select', prop: 'companiesCode', label: `企业类型`, dictTypeCode: 'QYLX', rules: [{ required: true, message: '请选择企业类型', trigger: 'change' }] },
        { type: 'text', prop: 'projectName', label: `项目名称`, rules: [{ required: true, message: '请输入项目名称', trigger: 'blur' }] },
        { type: 'text', prop: 'companiesName', label: `公司名称(投资方名称)`, rules: [{ required: true, message: '请输入公司名称(投资方名称)', trigger: 'blur' }] },
        { type: 'text', prop: 'companiesLocation', label: `投资方所在地市`, rules: [{ required: true, message: '请输入投资方所在地市', trigger: 'blur' }], isYQ: 'n' },
        { type: 'text', prop: 'companiesOwner', label: `投资项目业主`, rules: [{ required: true, message: '请输入投资项目业主', trigger: 'blur' }], isYQ: 'n' },
        { type: 'text', prop: 'companiesOwnerPhone', label: `投资项目联系电话`, rules: [{ required: true, message: '请输入投资项目联系电话', trigger: 'blur' }, { pattern: /^(1[3456789]\d{9})$/, message: '请输入有效的联系电话', trigger: 'blur' }], isYQ: 'n' },
        { type: 'text', prop: 'branchName', label: `子公司名称`, rules: [{ required: true, message: '请输入子公司名称', trigger: 'blur' }], isYQ: 'y' },
        { type: 'text', prop: 'branchSiting', label: `子公司选址`, rules: [{ required: true, message: '请输入子公司选址', trigger: 'blur' }], isYQ: 'y' },
        { type: 'select', prop: 'branchLevelType', label: `子公司级别`, dictTypeCode: 'zs_gsjb', rules: [{ required: true, message: '请选择子公司级别', trigger: 'change' }], isYQ: 'y' },
        { type: 'textarea', prop: 'summarized', label: `投资方概况`, maxlength: 300, autosize: {minRows: 6, maxRows: 6}, rules: [{ required: true, message: '请输入投资方概况', trigger: 'blur' }] },
        { type: 'textarea', prop: 'demandSite', label: `用地需求`, maxlength: 300, autosize: {minRows: 6, maxRows: 6}, rules: [{ required: true, message: '请输入用地需求', trigger: 'blur' }] },
      ],
      yFormDesignList: [],
      lFormDesignList: [],
      isSetRule: false
    }
  },
  watch:{
    parentId(val, old){
      if (val !== old){
        this.isSetRule = false
        this.getInitData()
      }
    },
    'formData.auditType'(val){
      let item = this.lFormDesignList.filter(v => v.prop === 'auditCause')[0]
      if (val === 2){
        this.$set(item, 'rules', [{ required: true, message: '请输入未通过原因', trigger: 'blur' }])
      }else{
        this.$set(item, 'rules', [])
      }
    }
  },
  created() {
    this.init()
    this.getUserZBInfo()
  },
  activated() {
    this.init()
  },
  methods: {
    init(){
      this.parentId = this.$route.query.id
      this.isDetail = this.$route.query.detail
      let other = this.source === 1 ? [
        { type: 'radio', prop: 'auditType', label: `是否评审通过`, options: [{value: 0,label:'未评审'}, {value: 1,label:'已通过'}, {value: 2,label:'未通过'}], rules: [{ required: true, message: '请选择是否评审通过', trigger: 'change' }] },
        { type: 'textarea', prop: 'auditCause', label: `原因`, maxlength: 300, autosize: {minRows: 6, maxRows: 6}}
      ] : [ { type: 'radio', prop: 'stateType', label: `项目状态`, options: [{value: 1,label:'未签约'}, {value: 2,label:'已签约'}, {value: 3,label:'已落实'}, {value: 4,label:'已投产'}, {value: 5,label:'项目异常'}], rules: [{ required: true, message: '请选择项目状态', trigger: 'change' }], isCol2: 1 } ]
      this.lFormDesignList = [
        { type: 'datetime', prop: 'fillTime', label: `首次填报时间`, format: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择首次填报时间', trigger: 'blur' }] },
        { type: 'datetime', prop: 'progressTime', label: `进展更新时间`, format: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择进展更新时间', trigger: 'blur' }] },
        { type: 'text', prop: 'department', label: `牵头部门`, rules: [{ required: true, message: '请输入牵头部门', trigger: 'blur' }] },
        { type: 'text', prop: 'contactsName', label: `牵头联系人`, rules: [{ required: true, message: '请输入牵头联系人', trigger: 'blur' }] },
        { type: 'text', prop: 'contactsPhone', label: `牵头联系电话`, rules: [{ required: true, message: '请输入牵头联系电话', trigger: 'blur' }, { pattern: /^(1[3456789]\d{9})$/, message: '请输入有效的联系电话', trigger: 'blur' }] },
        ...other,
        { type: 'textarea', prop: 'remark', label: `备注`, maxlength: 300, autosize: {minRows: 6, maxRows: 6}, rules: [{ message: '请输入建设内容', trigger: 'blur' }], isCol2: 1 },
      ]
      let otherY = this.source === 1 ? [] : [
        { type: 'datetime', prop: 'stateImplementTime', label: `项目落实时间`, format: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择项目落实时间', trigger: 'blur' }] },
        { type: 'datetime', prop: 'expectedBeginTime', label: `项目预计开始时间`, format: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择项目预计开始时间', trigger: 'blur' }] },
        { type: 'datetime', prop: 'expectedEndTime', label: `项目预计结束时间`, format: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择项目预计结束时间', trigger: 'blur' }] },
        { type: 'datetime', prop: 'actualBeginTime', label: `项目实际开始时间`, format: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择项目实际开始时间', trigger: 'blur' }] },
        { type: 'datetime', prop: 'actualEndTime', label: `项目实际结束时间`, format: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择项目实际结束时间', trigger: 'blur' }] }
      ]
      this.yFormDesignList = [
        { type: 'text', prop: 'companiesSiting', label: `初步选址`, rules: [{ required: true, message: '请输入初步选址', trigger: 'blur' }], isYQ: 'n' },
        { type: 'select', prop: 'landCode', label: `土地性质`, dictTypeCode: 'zs_tdxz', rules: [{ required: true, message: '请选择土地性质', trigger: 'change' }], isYQ: 'n' },
        { type: 'select', prop: 'cooperateCode', label: `合作方式`, dictTypeCode: 'zs_hzfs', rules: [{ required: true, message: '请选择合作方式', trigger: 'change' }], isYQ: 'n' },
        { type: 'number', prop: 'investmentFixed', label: `固定资产投资（亿元）`, rules: [{ required: true, message: '请输入固定资产投资（亿元）', trigger: 'blur' }], isYQ: 'n' },
        { type: 'number', prop: 'investmentPlan', label: `计划总投资（亿元）`, rules: [{ required: true, message: '请输入计划总投资（亿元）', trigger: 'blur' }] },
        { type: 'text', prop: 'constructionYearlyOutput', label: `建后年产`, rules: [{ required: true, message: '请输入建后年产', trigger: 'blur' }] },
        { type: 'text', prop: 'constructionTaxation', label: `建后税收`, rules: [{ required: true, message: '请输入建后税收', trigger: 'blur' }] },
        { type: 'datetime', prop: 'agencyTime', label: `拟签约时间`, format: 'yyyy-MM-dd HH:mm:ss', isYQ: 'n' },
        { type: 'datetime', prop: 'investmentFixedTime', label: `固定投资时间`, format: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择固定投资时间', trigger: 'blur' }], isYQ: 'n' },
        { type: 'datetime', prop: 'investmentPlanTime', label: `计划投资时间`, format: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择计划投资时间', trigger: 'blur' }] },
        { type: 'datetime', prop: 'registeredTime', label: `注册时间`, format: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择注册时间', trigger: 'blur' }], isYQ: 'y' },
        { type: 'datetime', prop: 'attestationTime', label: `预期认证时间`, format: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择预期认证时间', trigger: 'blur' }], isYQ: 'y' },
        { type: 'textarea', prop: 'constructionContent', label: `建设内容`, maxlength: 300, autosize: {minRows: 6, maxRows: 6}, rules: [{ required: true, message: '请输入建设内容', trigger: 'blur' }], isYQ: 'n'},
        { type: 'textarea', prop: 'constructionJobs', label: `建后可提供就业岗位`, maxlength: 300, autosize: {minRows: 6, maxRows: 6}, rules: [{ required: true, message: '请输入建后可提供就业岗位', trigger: 'blur' }] },
        { type: 'textarea', prop: 'demandEnterprise', label: `企业需求（诉求）`, maxlength: 300, autosize: {minRows: 6, maxRows: 6}, rules: [{ required: true, message: '请输入企业需求（诉求）', trigger: 'blur' }] },
        { type: 'textarea', prop: 'proposal', label: `下一步推进建议`, maxlength: 300, autosize: {minRows: 6, maxRows: 6}, rules: [{ required: true, message: '请输入下一步推进建议', trigger: 'blur' }] },
        { type: 'textarea', prop: 'situation', label: `项目推进情况`, maxlength: 300, autosize: {minRows: 6, maxRows: 6}, rules: [{ required: true, message: '请输入目前进展', trigger: 'blur' }] },
        { type: 'textarea', prop: 'issue', label: `存在问题`, maxlength: 300, autosize: {minRows: 6, maxRows: 6}, rules: [{ message: '请输入存在问题', trigger: 'blur' }], isCol2: 1 },
        ...otherY
      ]
    },
    setForm(data){
      const list = [...this.formDesignList, ...this.yFormDesignList, ...this.lFormDesignList], formData = {}
      list.map(v => {
        formData[v.prop] = !!data ? data[v.prop] || '' : ''
      })
      this.formData = formData
      this.$nextTick(() => {
        this.isSetRule = true
      })
    },
    getInitData(){
      if (!this.parentId) {
        this.setForm()
        return
      }
      this.pageLoading = true
      intservApi.detailZS_MANAGEItem({
        [this.idKeyName]: this.parentId
      }).then(res => {
        this.setForm(res.data)
        this.pageLoading = false
      }).catch(event => {
        this.setForm()
        this.pageLoading = false
      })
    },
    onSubmit() {
      if(!this.userZBInfo.specializedId) {
        this.$dtMessage({type: 'error', message: '当前用户不为专班成员，不可新增/修改！'})
        return
      }
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.pageLoading = true
          const params = {...this.formData, dedicatedId: !!this.formData.dedicatedId ? this.formData.dedicatedId : this.userZBInfo.specializedId, source: this.source}
          if (!!this.parentId) params[this.idKeyName] = this.parentId
          intservApi[`${!!this.parentId ? 'update' : 'add'}ZS_MANAGEItem`](params)
            .then((res) => {
              if (res.code == '00000') {
                this.pageLoading = false
                this.$message.success(`保存成功`)
              }
            })
            .catch(res => {
              this.pageLoading = false
              this.$message.error(`保存失败`)
            })
        }
      })
    },
    getUserZBInfo(){
      dataCaptureApi.getUserOfZB().then(res => {
        this.userZBInfo = res.data
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.el-form ::v-deep .el-form-item{
  width: calc((100% - 20px * 3) / 3);
  margin-right: 10px;
  margin-left: 10px;
  float: left;
  &.col2{
    width: calc((100% - 20px * 3) / 3 * 2 + 20px);
  }
  .el-select{
    display: block;
  }
  .el-date-editor.el-input{
    width: 100%;
  }
}
.sBar{
  width: 100%;
  clear: both;
  background-color: #f5f7fa;
  padding-top: 10px;
  margin-bottom: 16px;
}
.specTit{
  font-weight: 600;
  font-size: 15px;
  color: #333;
  padding-left: 10px;
  position: relative;
  line-height: 1;
  &:before{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: #1289FF;
    border-radius: 0 2px 2px 0;
  }
}
.mb16{
  margin-bottom: 16px;
}
</style>
